<template>
  <div class="main">
    <div class="content">
      <div class="content-box">
        <div class="content-box-head">
          <div class="content-box-head-frame"></div>
          <div class="content-box-head-text">数字人属性</div>
        </div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item>
            <div class="radio">
              <div class="radio-title" style=" width: 125px;">
                <img style="width: 18px;height: 18px;" src="../../images/star.png" alt />
                <span>数字人属性</span>
              </div>
              <div class="radio-option">
                <el-form-item prop="attributes">
                  <el-select
                    clearable
                    v-model="ruleForm.attributes"
                    class="elinput-left"
                    placeholder="请选择数字人属性"
                  >
                    <el-option
                      v-for="item in pullList.attr"
                      :key="item.dictValue"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
          </el-form-item>

          <div class="content-box-head">
            <div class="content-box-head-frame"></div>
            <div class="content-box-head-text">TA的基本信息</div>
          </div>

          <el-form-item class="big-box">
            <div class="birthday">
              <div class="birthday-title">
                <img style="width: 18px;height: 18px;" src="../../images/star.png" alt />
                <span>TA的名字</span>
              </div>
              <div class="birthday-option">
                <el-form-item prop="name">
                  <el-input
                    clearable
                    v-model="ruleForm.name"
                    class="elinput-left"
                    placeholder="没有的话，现在就给ta起个名字吧"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="gender">
                  <el-select
                    clearable
                    v-model="ruleForm.gender"
                    class="elinput-left"
                    placeholder="请选择性别"
                  >
                    <el-option
                      v-for="item in pullList.sex"
                      :key="item.value"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
          </el-form-item>

          <el-form-item class="big-box">
            <div class="birthday">
              <div class="birthday-title">
                <img style="width: 18px;height: 18px;" src="../../images/star.png" alt />
                <span>TA的生日(首次上线日期)</span>
              </div>
              <div class="birthday-option">
                <el-form-item prop="birthday">
                  <el-date-picker
                    v-model="ruleForm.birthday"
                    class="elinput-left"
                    style="width:482px;margin-right: 20px;"
                    type="date"
                    placeholder="选择日期"
                    @change="onPickChange"
                    value-format="yyyy-M-dd"
                    format="yyyy-M-dd"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-input
                    clearable
                    v-model="ruleForm.age"
                    class="elinput-left"
                    style="width:482px;"
                    placeholder="年龄自动显示"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
          </el-form-item>

          <el-form-item class="big-box">
            <div class="birthday">
              <div class="birthday-title">
                <img style="width: 18px;height: 18px;" src="../../images/star.png" alt />
                <span>TA的形象已发布平台</span> &nbsp;&nbsp;
                <span
                  style="font-size: 16px; font-weight: 400;color: #666666;"
                >平台链接可以让感兴趣的用户更全面的了解到数字人的实际应用场景，此项为非必填项~</span>
              </div>
              <div class="birthday-option">
                <div
                  class="birthday-option-item"
                  v-for="(item2,index) in pullList.platform"
                  :key="index"
                >
                  <el-checkbox v-model="item2.selected">{{item2.dictLabel}}</el-checkbox>
                  <el-input
                    v-show="item2.selected"
                    v-model="item2.platform_url"
                    placeholder="请输入内容"
                  ></el-input>
                </div>
              </div>
              <div class="birthday-option" v-if="ruleForm.vibrato.domains.length==0">
                <div style="cursor: pointer;" class="operate-minus" @click="addDomain">
                  <img src="../../images/plus.png" alt />
                  <p>新增</p>
                </div>
              </div>

              <div
                class="birthday-option"
                v-for="(domain, index) in ruleForm.vibrato.domains"
                :key="index"
              >
                <el-form-item>
                  <el-input
                    v-model="domain.name"
                    placeholder="请添加平台名称"
                    style="width: 482px;margin-right:20px;"
                  ></el-input>
                  <!-- <el-select
                    clearable
                    v-model="domain.platform"
                    class="elinput-left"
                    style="width:482px;margin-right: 20px;"
                    placeholder="请选择"
                    @change="disabledCahnge"
                  >
                    <el-option
                      v-for="item in pullList.platform"
                      :key="item.value"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                      :disabled="item.disabled"
                    ></el-option>
                  </el-select>-->
                </el-form-item>
                <el-form-item>
                  <el-input
                    clearable
                    v-model="domain.platform_url"
                    class="elinput-left"
                    style="width:482px;"
                    placeholder="请输入发布平台连接"
                  ></el-input>
                </el-form-item>

                <div class="operate" v-if="ruleForm.vibrato.domains.length>0">
                  <div
                    class="operate-minus"
                    style="cursor: pointer;"
                    @click.prevent="removeDomain(domain)"
                  >
                    <img src="../../images/minus.png" alt />
                    <p>删除</p>
                  </div>
                  <div
                    class="operate-minus"
                    @click="addDomain"
                    v-show="index==(ruleForm.vibrato.domains.length-1)"
                    style="cursor: pointer;"
                  >
                    <img src="../../images/plus.png" alt />
                    <p>新增</p>
                  </div>
                </div>
                <div class="operate" v-if="ruleForm.vibrato.domains.length<1">
                  <div
                    style="cursor: pointer;"
                    class="operate-minus"
                    @click="addDomain"
                    v-show="index===0"
                  >
                    <img src="../../images/plus.png" alt />
                    <p>新增</p>
                  </div>
                  <div
                    style="cursor: pointer;"
                    class="operate-minus"
                    @click="addDomain"
                    v-show="false"
                  >
                    <img src="../../images/plus.png" alt />
                    <p>新增</p>
                  </div>
                </div>
              </div>
              <div class="birthday-hint" v-show="hintShow">请输入</div>
            </div>
          </el-form-item>

          <el-form-item class="big-box">
            <div class="birthday">
              <div class="birthday-title">
                <img style="width: 18px;height: 18px;" src="../../images/star.png" alt />
                <span>TA所在行业(可多选)</span>
              </div>
              <div class="birthday-option">
                <el-form-item prop="industry" style="width: 100%; ">
                  <el-select
                    style="width: 984px;"
                    v-model="ruleForm.industry"
                    multiple
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in pullList.industry"
                      :key="item.value"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
          </el-form-item>

          <el-form-item class="big-box">
            <div class="birthday">
              <div class="birthday-title">
                <img style="width: 18px;height: 18px;" src="../../images/star.png" alt />
                <span>TA的驱动方式</span>
              </div>
              <div class="birthday-option">
                <el-form-item prop="driver" style="width: 100%; ">
                  <el-select v-model="ruleForm.driver" style="width: 984px;" placeholder="请选择">
                    <el-option
                      v-for="item in pullList.actuate"
                      :key="item.value"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
          </el-form-item>

          <el-form-item class="big-box">
            <div class="birthday">
              <div class="birthday-title">
                <img style="width: 18px;height: 18px;" src="../../images/star.png" alt />
                <span>TA的介绍</span>
              </div>
              <div class="birthday-option" style="width: 984px;">
                <el-form-item prop="introduce" style="width: 100%; ">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 7, maxRows: 4}"
                    placeholder="请输入内容"
                    v-model="ruleForm.introduce"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
          </el-form-item>

          <el-form-item class="big-box">
            <div class="birthday">
              <div class="birthday-title">
                <img style="width: 18px;height: 18px;" src="../../images/star.png" alt />
                <span>TA的形象是否对外授权</span>
              </div>
              <div class="birthday-option">
                <el-form-item prop="looks">
                  <el-select
                    clearable
                    v-model="ruleForm.looks"
                    class="elinput-left"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in pullList.accredit"
                      :key="item.value"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
          </el-form-item>

          <el-form-item>
            <div class="birthday">
              <div class="birthday-title">
                <img style="width: 18px;height: 18px;" src="../../images/star.png" alt />
                <span>TA的版权是否接收交易转让</span>
              </div>
              <div class="birthday-option">
                <el-form-item prop="copyright">
                  <el-select
                    clearable
                    v-model="ruleForm.copyright"
                    class="elinput-left"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in pullList.accredit"
                      :key="item.value"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
          </el-form-item>

          <div class="content-box-head">
            <div class="content-box-head-frame"></div>
            <div class="content-box-head-text">TA的授权信息</div>
          </div>

          <el-form-item class="big-box">
            <div class="radio">
              <div class="radio-title">
                <img style="width: 18px;height: 18px;" src="../../images/star.png" alt />
                <span>外观形象原型</span>
              </div>
              <div class="radio-option">
                <el-form-item prop="aspect">
                  <el-select
                    clearable
                    v-model="ruleForm.aspect"
                    class="elinput-left"
                    placeholder="请选择外观形象原型"
                  >
                    <el-option
                      v-for="item in pullList.images"
                      :key="item.value"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
          </el-form-item>

          <el-form-item class="big-box">
            <div class="birthday">
              <div class="birthday-title">
                <img style="width: 18px;height: 18px;" src="../../images/star.png" alt />
                <span>
                  如果形象原型是
                  <span v-if="ruleForm.aspect=='1'|| !ruleForm.aspect">本人</span>
                  <span v-if="ruleForm.aspect=='3'">虚构</span>
                  <span v-if="ruleForm.aspect=='2'">第三方的</span>，请上传
                  <span style="font-weight: bold;color: #000;">
                    <span v-if="ruleForm.aspect=='1'|| !ruleForm.aspect">【原创声明】</span>
                    <span v-if="ruleForm.aspect=='3'">【虚构原创声明】</span>
                    <span v-if="ruleForm.aspect=='2'">【形象使用授权书】</span>
                    <span style="font-weight: 500;">
                      <a
                        @click="download('1')"
                        style="color: #580ec0;cursor: pointer;"
                      >下载{{ruleForm.aspect=='2'? '形象授权书':'原创证明书'}}</a>
                    </span>
                  </span>
                </span>
              </div>
              <div class="offsetParent" style="width:500px">
                <el-form-item>
                  <el-upload
                    class="upload-demo"
                    action="#"
                    :auto-upload="true"
                    :file-list="ruleForm.archetype"
                    :http-request="uploadSectionFile"
                    :on-remove="archetypeRemove"
                    multiple
                    :before-upload="archetypeChange"
                  >
                    <div class="file">
                      <img src="../../images/file.png" alt />
                      <p>上传文件图片</p>
                    </div>
                  </el-upload>
                </el-form-item>
                <div class="offsetParent-child" v-if="personalImgShow">请上传文件</div>
              </div>
            </div>
          </el-form-item>

          <el-form-item class="big-box">
            <div class="radio" style="margin-top: 20px;">
              <div class="radio-title">
                <img style="width: 18px;height: 18px;" src="../../images/star.png" alt />
                <span>声音音质原型</span>
              </div>
              <div class="radio-option">
                <el-form-item prop="sound">
                  <el-select
                    clearable
                    v-model="ruleForm.sound"
                    class="elinput-left"
                    placeholder="请选择声音音质"
                  >
                    <el-option
                      v-for="item in pullList.audio"
                      :key="item.value"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
          </el-form-item>

          <el-form-item class="big-box">
            <div class="birthday">
              <div class="birthday-title">
                <img style="width: 18px;height: 18px;" src="../../images/star.png" alt />
                <span>
                  如果声音原型是
                  <span v-if="ruleForm.sound=='1'|| !ruleForm.sound">本人</span>
                  <span v-if="ruleForm.sound=='3'">虚构</span>
                  <span v-if="ruleForm.sound=='2'">第三方的</span>，请上传
                  <span style="font-weight: bold;color: #000;">
                    <span v-if="ruleForm.sound=='1'|| !ruleForm.sound">【原创声明】</span>
                    <span v-if="ruleForm.sound=='3'">【虚构原创声明】</span>
                    <span v-if="ruleForm.sound=='2'">【声音使用授权书】</span>
                    <span style="font-weight: 500;">
                      <a
                        @click="download('2')"
                        style="color: #580ec0;cursor: pointer;"
                      >下载声音{{ruleForm.sound=='2'? '授权书':'原创证明书'}}</a>
                    </span>
                  </span>
                </span>
              </div>
              <div style="width:500px" class="offsetParent">
                <el-form-item>
                  <el-upload
                    class="upload-demo"
                    :on-remove="listenRemove"
                    multiple
                    :file-list="ruleForm.listen"
                    action="#"
                    :auto-upload="true"
                    :http-request="listenUploadFile"
                    :before-upload="listenChange"
                  >
                    <div class="file">
                      <img src="../../images/file.png" alt />
                      <p>上传文件图片</p>
                    </div>
                  </el-upload>
                </el-form-item>
                <div class="offsetParent-child" v-if="IndividualVoiceShow">请上传文件</div>
              </div>
            </div>
          </el-form-item>

          <div class="content-box-head" style="margin-top: 20px;">
            <div class="content-box-head-frame"></div>
            <div class="content-box-head-text">TA的权属信息</div>
          </div>

          <el-form-item class="big-box">
            <div class="birthday">
              <div class="birthday-title">
                <img style="width: 18px;height: 18px;" src="../../images/star.png" alt />
                <span>数字人外观形象上传（仅支持JPG格式上传，限制1M以下）</span> &nbsp;
                <span style="color:#3A7BD8;">示例说明</span>
              </div>
              <div style="display: flex;">
                <el-form-item>
                  <el-upload
                    action="#"
                    list-type="picture-card"
                    :on-change="leftChange"
                    :auto-upload="false"
                    :class="{ hide: ruleForm.imageLifeShow||ruleForm.imageLifetUrl }"
                    :file-list="ruleForm.imageLifet"
                    :http-request="imageLifetUpload"
                    style="display:flex;"
                  >
                    <!-- <i slot="default" class="el-icon-plus"></i> -->
                    <div class="shangchaun">
                      <img src="../../images/uploading.png" alt />
                      <p>上传左45度</p>
                      <div class="shangchaun-child" v-if="imgLeftShow">请上传图片</div>
                    </div>

                    <div slot="file" slot-scope="{file}">
                      <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                      <span class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-preview" @click="LifetbigChange()">
                          <i class="el-icon-zoom-in"></i>
                        </span>
                        <span class="el-upload-list__item-delete" @click="leftRemovess()">
                          <i class="el-icon-delete"></i>
                        </span>
                      </span>
                    </div>
                  </el-upload>
                  <el-dialog :visible.sync="ruleForm.leftBigShow">
                    <img width="100%" :src="ruleForm.imageLifetUrl" alt />
                  </el-dialog>
                </el-form-item>

                <el-form-item>
                  <el-upload
                    action="#"
                    list-type="picture-card"
                    :on-change="FrontChange"
                    :auto-upload="false"
                    :class="{ hide: ruleForm.imageFrontShow || ruleForm.imageFrontUrl}"
                    :file-list="ruleForm.imageFront"
                    :http-request="imageFrontUpload"
                    style="display: flex;"
                  >
                    <!-- <i slot="default" class="el-icon-plus"></i> -->
                    <div class="shangchaun">
                      <img src="../../images/uploading.png" alt />
                      <p>上传正面</p>
                      <div class="shangchaun-child" v-if="imgFrontShow">请上传图片</div>
                    </div>
                    <div slot="file" slot-scope="{file}">
                      <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                      <span class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-preview" @click="Frontview(file)">
                          <i class="el-icon-zoom-in"></i>
                        </span>
                        <span
                          v-if="!disabled"
                          class="el-upload-list__item-delete"
                          @click="FrontRemovess(file)"
                        >
                          <i class="el-icon-delete"></i>
                        </span>
                      </span>
                    </div>
                  </el-upload>
                  <el-dialog :visible.sync="ruleForm.FrontBigShow">
                    <img width="100%" :src="ruleForm.imageFrontUrl" alt />
                  </el-dialog>
                </el-form-item>

                <el-form-item>
                  <el-upload
                    action="#"
                    list-type="picture-card"
                    :on-change="rightChange"
                    :auto-upload="false"
                    :class="{ hide: ruleForm.imageRightShow || ruleForm.imageRightUrl}"
                    :file-list="ruleForm.imageRight"
                    :http-request="imageRightUpload"
                    style="display: flex;"
                  >
                    <!-- <i slot="default" class="el-icon-plus"></i> -->
                    <div class="shangchaun">
                      <img src="../../images/uploading.png" alt />
                      <p>上传右45度</p>
                      <div class="shangchaun-child" v-if="imgRightShow">请上传图片</div>
                    </div>
                    <div slot="file" slot-scope="{file}">
                      <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                      <span class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-preview" @click="rightView(file)">
                          <i class="el-icon-zoom-in"></i>
                        </span>
                        <span
                          v-if="!disabled"
                          class="el-upload-list__item-delete"
                          @click="rightRemoves(file)"
                        >
                          <i class="el-icon-delete"></i>
                        </span>
                      </span>
                    </div>
                  </el-upload>
                  <el-dialog :visible.sync="ruleForm.rightBigShow">
                    <img width="100%" :src="ruleForm.imageRightUrl" alt />
                  </el-dialog>
                </el-form-item>
              </div>
            </div>
          </el-form-item>
          <!-- 视频 -->
          <el-form-item v-if="false">
            <div class="birthday">
              <div class="birthday-title">
                <img style="width: 18px;height: 18px;" src="../../images/star.png" alt />
                <span>数字视频上传</span>
                &nbsp;
                <span style="color:#3A7BD8;">示例说明</span>
                &nbsp;
                <span
                  style="font-size: 16px; font-weight: 400;color: #666666;"
                >(支持mp4、mov两种格式上传,限制30mb以下)</span>
              </div>
              <div class="upload-box">
                <div class="avatar-uploader-box">
                  <!-- 图片预览 -->
                  <div :key="index" class="video-preview" v-for="(item, index) in videoList">
                    <video
                      v-if="item.videoLink"
                      :src="`${videoBaseUrl}${item.videoLink}`"
                      @mouseover.stop="item.isShowPopup = true"
                      class="avatar"
                    >您的浏览器不支持视频播放</video>
                    <video
                      v-else
                      :src="item.url"
                      @mouseover.stop="item.isShowPopup = true"
                      class="avatar"
                    >您的浏览器不支持视频播放</video>
                    <!-- 显示查看和删除的按钮弹窗 -->
                    <div
                      @mouseleave="item.isShowPopup = false"
                      class="avatar-uploader-popup"
                      v-show="(item.videoLink || item.url) && item.isShowPopup"
                    >
                      <i @click="previewVideo(item)" class="el-icon-zoom-in"></i>
                      <i @click="deleteVideo(index)" class="el-icon-delete"></i>
                    </div>
                  </div>

                  <!-- 方框样式 -->
                  <el-upload
                    v-if="videoUploadShow"
                    :action="actionUrl"
                    :auto-upload="false"
                    :on-change="handleAvatarChange"
                    :show-file-list="false"
                    class="avatar-uploader"
                    ref="avatarUploader"
                    v-show="uploadShow"
                    accept="video/*"
                  >
                    <span
                      element-loading-background="rgba(0, 0, 0, 0.8)"
                      element-loading-spinner="el-icon-loading"
                      element-loading-text="上传中"
                      style="display:block;"
                      v-loading="loading"
                    >
                      <div class="video">
                        <img src="../../images/video.png" alt />
                        <p>点击上传</p>
                        <div class="video-child" v-if="videoShow">请上传视频</div>
                      </div>
                    </span>
                  </el-upload>

                  <!-- 上传提示文字样式 -->
                  <div class="upload-tip">
                    <slot></slot>
                  </div>
                </div>
                <!-- 视频上传进度条 -->
                <div style="width: 500px;">
                  <el-progress v-show="showProcess" :percentage="processLen" :stroke-width="2" />
                </div>

                <!-- 查看大图 -->
                <el-dialog
                  :visible.sync="dialogVisible"
                  append-to-body
                  center
                  title="视频查看"
                  :before-close="handleClose"
                >
                  <video
                    :src="videoSrc"
                    ref="video"
                    width="100%"
                    height="540px"
                    controls
                    alt
                  >您的浏览器不支持视频播放</video>
                </el-dialog>
                <div class="upload-box-hint" v-if="uploadHintShow">视频上传失败，请重新上传</div>
              </div>
            </div>
          </el-form-item>

          <!-- 提交 -->
          <el-form-item class="submit">
            <el-button type="primary" class="submit-last" @click="lastStep">返回上一步</el-button>
            <el-button type="primary" class="submit-but" @click="submitForm('ruleForm')">提交并下一步</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="main-their">中国数字人知识产权存证保护平台</div>
  </div>
</template>

<script>
var client;
import req from "@/utils/bjca_crypto.js"; //引入hash算法js文件
import OSS from "ali-oss";
import {
  getPull,
  getSts,
  addPeople,
  getDetails,
  savePul,
  beforehand
} from "@/utils/api";
export default {
  name: "infoView",

  props: {
    videos: {
      type: Array,
      default: function() {
        return [];
      }
    },
    numLimit: {
      // 最大允许上传个数
      type: Number,
      default: 1
    },
    sizeLimit: {
      // 最大单文件大小
      type: Number,
      default: 50
    }
  },
  components: {},
  data() {
    return {
      id: "",
      ruleForm: {
        attributes: "",
        name: "",
        gender: "",
        birthday: "",
        age: "",
        vibrato: {
          domains: [
            // {
            //   platform: "0",
            //   name:"平台连接",
            //   platform_url: "12354"
            // }
          ]
        }, //自定义形象发布平台
        industry: [],
        driver: [],
        introduce: "",
        looks: "",
        copyright: "",
        aspect: "",
        // 外观形象文件
        archetype: [],
        archetypeUrl: [],
        // 第三方形象
        thirdParty: [],
        sound: "",
        listen: [],
        listenUrl: [],
        imageLifet: [],
        imageLifeShow: false,
        imageLifetUrl: "",
        leftBigShow: false,
        imageFront: [],
        imageFrontShow: false,
        FrontBigShow: false,
        imageFrontUrl: "",
        imageRight: [],
        imageRightShow: false,
        rightBigShow: false,
        imageRightUrl: "",
        video: [],
        videoUrl: "",
        videoBigShow: false
      },

      rules: {
        attributes: [
          { required: true, message: "请选择数字人属性", trigger: "blur" }
        ],
        name: [
          { required: true, message: "请输入名字", trigger: "blur" },
          {
            min: 1,
            max: 8,
            message: "名称过长，请控制8个字以内",
            trigger: "blur"
          }
        ],
        gender: [{ required: true, message: "请选择性别", trigger: "blur" }],
        birthday: [{ required: true, message: "请选择生日", trigger: "blur" }],
        vibrato: [{ required: true, message: "请选择", trigger: "blur" }],

        industry: [{ required: true, message: "请选择行业", trigger: "blur" }],
        driver: [
          { required: true, message: "请选择驱动方式", trigger: "blur" }
        ],
        introduce: [
          { required: true, message: "请输入介绍内容", trigger: "blur" }
        ],
        looks: [
          { required: true, message: "请选择是否形象对外授权", trigger: "blur" }
        ],
        copyright: [
          { required: true, message: "请选择是否授权交易转让", trigger: "blur" }
        ],
        aspect: [
          { required: true, message: "请选择外观形象原型", trigger: "blur" }
        ],
        archetype: [
          { required: true, message: "请上传外观形象原型", trigger: "blur" }
        ],
        authorization: [
          { required: true, message: "请上传形象使用授权书", trigger: "blur" }
        ],
        sound: [{ required: true, message: "请选择声音音质", trigger: "blur" }],
        listen: [
          { required: true, message: "请上传原创声音", trigger: "blur" }
        ],
        vocality: [
          { required: true, message: "请上传第三方声音", trigger: "blur" }
        ],
        imageLifet: [
          { required: true, message: "请上传左45度", trigger: "blur" }
        ],
        imageFront: [
          { required: true, message: "请上传正面", trigger: "blur" }
        ],
        imageRight: [
          { required: true, message: "请上传右45度", trigger: "blur" }
        ]
      },
      pullList: {
        platform: [],
        accredit: [],
        actuate: [],
        attr: [],
        audio: [],
        images: [],
        industry: [],
        sex: []
      },

      // vibrato: {
      //   domains: [
      //     {
      //       platform: "",
      //       platform_url: ""
      //     },
      //     {
      //       platform: "",
      //       platform_url: ""
      //     }
      //   ]
      // },
      options: [],
      disabled: false,
      //视频
      loading: false,
      dialogVisible: false,
      videoList: [],
      videoSrc: "",
      actionUrl: "",
      videoUploadShow: true,
      showProcess: false, //视频上传进度条显示隐藏
      processLen: 0, //视频上传进度
      // 提示
      personalImgShow: false,
      IndividualVoiceShow: false,
      imgLeftShow: false,
      imgRightShow: false,
      imgFrontShow: false,
      videoShow: false,
      hintShow: false,
      hintShowValue: false,
      edit: "",
      editShow: false,
      uploadHintShow: false,
      xtx: {}, //算法中的方法
      cajskey: "", //算法中的cajskey
      hashVal: "", //算法得到的hash
      beforehandVal: {}, //预上传是数据
      terrace: {},
      //  {
      //   // link1:"12345"
      // }, //发布平台
      terraceList: [], //发布平台名称和连接
      terraceShow: [
        // '1'
      ], //发布连接输入输入框显示隐藏
      platformVal: [], //形象发布连接平台总和
      checkbox: {
        // show1:true
      },
      platformIds: []
    };
  },
  created() {
    this.init();
    this.id = localStorage.getItem("subjectId");
    this.edit = localStorage.getItem("edit");
    if (this.edit) {
      this.editShow = true;
      this.amend();
    }
    this.xtx = req.outxtx();
    this.cajskey = req.cajskey();
  },

  beforeDestroy() {
    if (this.edit) {
      localStorage.removeItem("edit");
    }
  },

  computed: {
    uploadShow() {
      return this.videos.length < this.numLimit;
    }
  },
  watch: {
    videos: {
      handler() {
        const isArray = Array.isArray(this.videos);
        if (isArray && this.videos.length > 0) {
          this.videos.map(item => {
            item.isShowPopup = false;
          });
          this.videoList = JSON.parse(JSON.stringify(this.videos));
        } else {
          this.videoList = [];
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    console.log("引入变量", req.outxtx());
  },

  methods: {
    // 数字人修改
    amend() {
      getDetails({ id: this.edit }, res => {
        if (res.code === 200) {
          this.ruleForm.attributes = res.data.attrId.toString();
          this.ruleForm.name = res.data.name;
          this.ruleForm.gender = res.data.sex.toString();
          this.ruleForm.birthday = res.data.birthday;
          this.onPickChange(res.data.birthday);
          this.ruleForm.vibrato.domains = [];
          // 平台连接
          // this.pullList.platform
          console.log(res.data.peopleRelevanceList);
          let ids = [];
          let Url = [];
          res.data.peopleRelevanceList.forEach((item, index) => {
            ids.push(item.platform);
            Url.push(item.platformUrl);
            if (item.platform == 0) {
              this.ruleForm.vibrato.domains.push({
                platform: "0",
                platform_url: item.platformUrl,
                name: item.name
              });
            }
          });
          this.platformIds = ids;
          console.log("ids", ids);
          this.pullList.platform.forEach((item, index) => {
            var is = ids.indexOf(item.dictValue * 1);
            console.log("is", is);
            if (is > -1) {
              item.selected = true;
              item.platform_url = Url[is];
            } else {
              item.selected = false;
              item.platform_url = "";
            }
          });
          this.$forceUpdate();

          // this.$set(this.pullList,'platform',this.pullList.platform)

          // res.data.peopleRelevanceList.forEach((item, index) => {
          //   if(item.platform!=0){
          //     this.terraceShow.push(item.platform.toString()),
          //     this.checkbox['show'+item.platform]=true
          //     this.terrace['link'+item.platform]=item.platformUrl
          //   }else{
          //     this.ruleForm.vibrato.domains.push({
          //     platform: '0',
          //     platform_url: item.platformUrl,
          //     name:item.name
          //   });
          //   }
          // });

          console.log("平台连接", this.pullList);

          // res.data.peopleRelevanceList.forEach((item, index) => {
          //   this.ruleForm.vibrato.domains.push({
          //     platform: item.platform.toString(),
          //     platform_url: item.platformUrl
          //   });
          // });

          [...res.data.industryIds.replace(/[^0-9]/g, "")].forEach(item => {
            this.ruleForm.industry.push(item);
          });
          [...res.data.actuateIds.replace(/[^0-9]/g, "")].forEach(item => {
            this.ruleForm.driver.push(item);
          });
          this.ruleForm.introduce = res.data.content;
          this.ruleForm.looks = res.data.imgAccredit.toString();
          this.ruleForm.copyright = res.data.copyright.toString();
          this.ruleForm.aspect = res.data.imgType.toString();
          // 形象文件
          let imgDocText = "";
          if (res.data.imgType == 1) {
            imgDocText = "外观形象原创";
          } else if (res.data.imgType == 2) {
            imgDocText = "第三方形象";
          } else {
            imgDocText = "虚拟形象原创";
          }

          this.ruleForm.archetype.push({
            name: imgDocText,
            url: res.data.imgDoc
          });
          this.ruleForm.archetypeUrl.push(res.data.imgDoc);
          this.ruleForm.sound = res.data.audioType.toString();
          // 声音文件
          let audioDocText = "";
          if (res.data.imgType == 1) {
            audioDocText = "声音形象原创";
          } else if (res.data.imgType == 2) {
            audioDocText = "第三方声音";
          } else {
            audioDocText = "虚拟声音原创";
          }
          this.ruleForm.listen.push({
            name: audioDocText,
            url: res.data.audioDoc
          });
          this.ruleForm.listenUrl.push(res.data.audioDoc);
          this.ruleForm.imageLifet.push({
            name: "imgLeft45.jpeg",
            url: res.data.imgLeft45
          });
          this.ruleForm.imageLifetUrl = res.data.imgLeft45;

          this.ruleForm.imageFront.push({
            name: "imgUrl.jpeg",
            url: res.data.imgUrl
          });
          this.ruleForm.imageFrontUrl = res.data.imgUrl;
          this.ruleForm.imageRight.push({
            name: "imgRight45.jpeg",
            url: res.data.imgRight45
          });
          this.ruleForm.imageRightUrl = res.data.imgRight45;

          this.videoList.push({
            videoFile: "video.jpeg",
            url: res.data.video,
            isShowPopup: false
          });
          this.videoSrc = res.data.video;
          this.actionUrl = res.data.video;
          this.videoUploadShow = false;
          this.hashVal = res.data.hashVal;
          this.$nextTick(() => {
            this.$forceUpdate();
            console.log("地方hi");
          });
        }
      });
    },
    // 强制刷新
    cheChange(e) {
      this.$forceUpdate(); //强制刷新当前页面
      console.log("che", e, this.pullList.platform);
    },
    init() {
      // 获取oss数据
      getSts({}, res => {
        client = new OSS({
          region: "oss-cn-beijing",
          accessKeyId: res.data.oss.credentials.accessKeyId,
          accessKeySecret: res.data.oss.credentials.accessKeySecret,
          stsToken: res.data.oss.credentials.securityToken,
          bucket: res.data.bucket
        });
      });
      // 下拉框
      getPull({}, res => {
        res.data.platform.forEach(item => {
          item.platform_url = "";
          item.selected = false;
        });
        this.pullList = res.data;
      });
    },
    // 调用父组件中的方法
    lastStep() {
      this.$emit("lastStep");
    },
    // 提交判断
    submitForm(formName) {
      this.hintChange();

      this.$refs[formName].validate(valid => {
        if (valid) {
          if (
            this.ruleForm.archetypeUrl.length > 0 &&
            this.ruleForm.listenUrl.length > 0 &&
            this.ruleForm.imageLifetUrl &&
            this.ruleForm.imageFrontUrl &&
            this.ruleForm.imageRightUrl &&
            this.hintShowValue
            // &&this.videoSrc
          ) {
            this.submit();
          }
          // alert("提交成功!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // 提交
    submit() {
      this.id = localStorage.getItem("subjectId");
      // 驱动方式
      var driver = this.ruleForm.driver;
      // if (this.ruleForm.driver) {
      //   this.ruleForm.driver.forEach(item => {
      //     console.log(item);
      //     driver = item + "," + driver;
      //   });
      // }
      // 行业
      var industry = "";
      if (this.ruleForm.driver) {
        this.ruleForm.industry.forEach(item => {
          industry = item + "," + industry;
        });
      }

      var imgDoc = "";
      if (this.ruleForm.archetypeUrl) {
        this.ruleForm.archetypeUrl.forEach((item, index) => {
          console.log("wenjian", item);
          if (index > 0) {
            imgDoc = item + "," + imgDoc;
          } else {
            imgDoc = item;
          }
        });
      }
      var audioDoc = "";
      if (this.ruleForm.listenUrl) {
        this.ruleForm.listenUrl.forEach((item, index) => {
          if (index > 0) {
            audioDoc = item + "," + audioDoc;
          } else {
            audioDoc = item;
          }
        });
      }

      if (this.edit) {
        // 数字人更改提交信息
        savePul(
          {
            id: this.edit,
            actuateIds: driver,
            attrId: this.ruleForm.attributes,
            name: this.ruleForm.name,
            sex: this.ruleForm.gender,
            birthday: this.ruleForm.birthday,
            industryIds: industry,
            content: this.ruleForm.introduce,
            imgAccredit: this.ruleForm.looks,
            copyright: this.ruleForm.copyright,
            imgType: this.ruleForm.aspect,
            imgDoc: imgDoc,
            audioType: this.ruleForm.sound,
            audioDoc: audioDoc,
            imgLeft45: this.ruleForm.imageLifetUrl,
            imgRight45: this.ruleForm.imageRightUrl,
            imgUrl: this.ruleForm.imageFrontUrl,
            // video: this.videoSrc,
            subjectId: this.id,
            platformJson: this.platformVal,
            hashStr: this.hashVal
          },
          res => {
            if (res.code === 200) {
              this.$message({
                message: "修改成功",
                type: "success"
              });
              setTimeout(() => {
                this.$router.push({ name: "datum" });
              }, 1500);
            }
          }
        );
      } else {
        // 数字人创建提交信息
        addPeople(
          {
            actuateIds: driver,
            attrId: this.ruleForm.attributes,
            name: this.ruleForm.name,
            sex: this.ruleForm.gender,
            birthday: this.ruleForm.birthday,
            industryIds: industry,
            content: this.ruleForm.introduce,
            imgAccredit: this.ruleForm.looks,
            copyright: this.ruleForm.copyright,
            imgType: this.ruleForm.aspect,
            imgDoc: imgDoc,
            audioType: this.ruleForm.sound,
            audioDoc: audioDoc,
            imgLeft45: this.ruleForm.imageLifetUrl,
            imgRight45: this.ruleForm.imageRightUrl,
            imgUrl: this.ruleForm.imageFrontUrl,
            // video: this.videoSrc,
            subjectId: this.id,
            platformJson: this.platformVal,
            eventId: this.beforehandVal.eventId,
            createName: this.beforehandVal.createName,
            creatorType: this.beforehandVal.creatorType,
            creatorId: this.beforehandVal.creatorId,
            fileName: this.beforehandVal.fileName,
            hashStr: this.hashVal
          },
          res => {
            console.log(res);
            if (res.code === 200) {
              localStorage.setItem("expire", res.data.expire);
              localStorage.setItem("orderNo", res.data.id);
              localStorage.setItem("orderPrice", res.data.orderPrice);
              // 调用父组件中的方法
              this.$emit("handleChange");
            }
          }
        );
      }
    },

    // 提示语显示隐藏
    hintChange() {
      // console.log("长度", this.ruleForm.listenUrl.length);
      console.log(this.ruleForm.archetypeUrl);
      if (this.ruleForm.archetypeUrl.length < 1) {
        this.personalImgShow = true;
      } else {
        this.personalImgShow = false;
      }
      if (this.ruleForm.listenUrl.length < 1) {
        this.IndividualVoiceShow = true;
      } else {
        this.IndividualVoiceShow = false;
      }
      if (!this.ruleForm.imageLifetUrl) {
        this.imgLeftShow = true;
      }
      if (!this.ruleForm.imageFrontUrl) {
        this.imgFrontShow = true;
      }
      if (!this.ruleForm.imageRightUrl) {
        this.imgRightShow = true;
      }
      // 视频
      // if (!this.videoSrc) {
      //   this.videoShow = true;
      // }
      // 发布平台提示语显示隐藏
      // 形象发布平台

      var platformList = [];
      this.pullList.platform.forEach(item => {
        if (item.selected == true)
          platformList.push({
            platform: item.dictValue,
            platform_url: item.platform_url
          });
      });

      // 手动添加的链接
      this.ruleForm.vibrato.domains.forEach(item => {
        platformList.push(item);
      });
      this.platformVal = JSON.stringify(platformList);
      if (platformList.length > 0) {
        this.hintShow = false;
        this.hintShowValue = true;
      } else {
        this.hintShow = true;
        this.hintShowValue = false;
      }

      //  platformList.forEach(item => {
      //   console.log("sdff",item);
      //     if (item.platform) {
      //       this.hintShow = false;
      //       this.hintShowValue = true;
      //       console.log("数据", item.platform, item.platform_url);
      //     } else {
      //       this.hintShow = true;
      //       this.hintShowValue = false;
      //       console.log("数据132132");
      //     }
      //   });
    },

    // 时间选择
    onPickChange(e) {
      console.log(this.ruleForm.birthday);
      let date = new Date();
      let year = date.getFullYear();
      let m = date.getMonth() + 1;
      if (year == e.split("-")[0]) {
        console.log("年龄相等");
        this.ruleForm.age = m - e.split("-")[1] + "个月";
      } else {
        this.ruleForm.age = year - e.split("-")[0] + "岁";
      }

      console.log("年龄", year, e.split("-")[0]);
    },
    // 形象链接删除
    removeDomain(item) {
      console.log("删除", item);
      // this.ruleForm.vibrato.domains.pop();
      var index = this.ruleForm.vibrato.domains.indexOf(item);
      if (index !== -1) {
        this.ruleForm.vibrato.domains.splice(index, 1);
      }

      // 释放已选项
      this.pullList.platform.forEach(its => {
        console.log(item);
        if (its.dictValue == item.platform) {
          its.disabled = false;
        }
      });
    },
    // 形象链接增加
    addDomain() {
      this.ruleForm.vibrato.domains.push({
        platform: "0",
        platform_url: "",
        name: ""
      });

      console.log(this.ruleForm.vibrato.domains);
    },
    // 禁用已选项
    disabledCahnge() {
      this.pullList.platform.forEach(its => {
        this.ruleForm.vibrato.domains.forEach(item => {
          if (its.dictValue == item.platform) {
            console.log(its.dictValue, item.platform);
            its.disabled = true;
          }
        });
      });
    },

    // 形象原型文件限制条件
    archetypeChange(file) {
      const archetypeJPG = ["image/jpg", "image/jpeg", "image/png"];
      const archetype2M = file.size / 1024 / 1024 < 1;
      var archetypeShow = true;
      if (!archetypeJPG.includes(file.type)) {
        archetypeShow = false;
        this.$message.error("请上传JPG/PNG格式图片!");
      }
      if (!archetype2M) {
        this.$message.error("上传图片大小不能超过 1MB!");
      }
      return archetypeShow && archetype2M;
    },
    // 形象原型文件
    uploadSectionFile(option) {
      console.log("形象文件上传", option.file);
      let uid = option.file.uid;
      let file = option.file;
      const date = new Date().getTime();
      const namearr = file.name;
      // 定义上传文件的名字+后缀
      const storeAs = uid + "" + date + "." + namearr;
      // 调用oss上传接口
      client
        .multipartUpload("carplusgo-info-img/" + storeAs, file)
        .then(response => {
          if (response.res.status === 200) {
            console.log("上传成功", response.res);
            this.ruleForm.archetypeUrl.push(response.res.requestUrls[0]);
          }
        })
        .catch(function(err) {
          console.error("error: ", err);
        });
    },
    // 形象文件删除
    archetypeRemove() {
      this.ruleForm.archetypeUrl = [];
      console.log("删除", this.ruleForm.archetypeUrl);
    },
    listenChange(file) {
      const listenJPG = ["image/jpg", "image/jpeg", "image/png"];
      const listen2M = file.size / 1024 / 1024 < 1;
      var listenShow = true;
      if (!listenJPG.includes(file.type)) {
        listenShow = false;
        this.$message.error("请上传JPG/PNG格式图片!");
      }
      if (!listen2M) {
        this.$message.error("上传图片大小不能超过 1MB!");
      }
      return listenShow && listen2M;
    },
    // 声音文件删除
    listenRemove() {
      this.ruleForm.listenUrl = [];
    },
    // 声音原型文件
    listenUploadFile(option) {
      console.log("声音文件上传", option.file);
      let uid = option.file.uid;
      let file = option.file;
      const date = new Date().getTime();
      const namearr = file.name.split(".");
      // 定义上传文件的名字+后缀
      const storeAs = uid + "" + date + "." + namearr[1];
      // 调用oss上传接口
      client
        .multipartUpload("carplusgo-info-img/" + storeAs, file)
        .then(response => {
          if (response.res.status === 200) {
            this.ruleForm.listenUrl.push(response.res.requestUrls[0]);
            console.log("上传成功", response.res, this.ruleForm.listenUrl);
          }
        })
        .catch(function(err) {
          console.error("error: ", err);
        });
    },

    // 左45度
    leftChange(file) {
      const isLt2M = file.size / 1024 / 1024 < 1;
      if (file.raw.type.indexOf("image/jpeg") != -1 && isLt2M) {
        // console.log("格式正确", file.raw);
        this.ruleForm.imageLifeShow = true;
        this.imageLifetUpload(file);
      } else {
        this.ruleForm.imageLifet = [];
        this.$message({
          message: "仅支持JPG格式上传，限制1M以下",
          type: "error"
        });
      }
    },
    LifetbigChange() {
      this.ruleForm.leftBigShow = true;
    },
    leftRemovess() {
      this.ruleForm.imageLifeShow = false;
      this.ruleForm.imageLifetUrl = "";
      this.ruleForm.imageLifet = [];
    },
    imageLifetUpload(option) {
      // console.log("图片上传", option.raw);
      let uid = option.raw.uid;
      let raw = option.raw;
      const date = new Date().getTime();
      const namearr = raw.name.split(".");
      // 定义上传文件的名字+后缀
      const storeAs = uid + "" + date + "." + namearr[1];
      // 调用oss上传接口
      client
        .multipartUpload("carplusgo-info-img/" + storeAs, raw)
        .then(response => {
          if (response.res.status === 200) {
            console.log("上传成功", response.res);
            if (response.res.requestUrls[0].indexOf("?") > -1) {
              this.ruleForm.imageLifetUrl = response.res.requestUrls[0].split(
                "?"
              )[0];
            } else {
              this.ruleForm.imageLifetUrl = response.res.requestUrls[0];
            }
          }
        })
        .catch(function(err) {
          console.error("error: ", err);
        });
    },
    // 正面
    FrontChange(file) {
      const isLt2M = file.size / 1024 / 1024 < 1;
      if (file.raw.type.indexOf("image/jpeg") != -1 && isLt2M) {
        // console.log("格式正确", file.raw);
        this.ruleForm.imageFrontShow = true;
        this.imageFrontUpload(file);
        var file = file.raw;
        // 预上传
        beforehand({ filename: file.name }, res => {
          if (res.code === 200) {
            this.beforehandVal = res.data;
            // 通过国密算法得到hash值
            var strUserData = {
              creatorType: res.data.creatorType,
              creatorId: res.data.creatorId,
              createName: res.data.createName,
              eventId: res.data.eventId,
              fileName: res.data.fileName
            };
            // console.log('传值',JSON.stringify(strUserData));

            this.xtx.onReady = val => {
              console.log("hash值", val);
              this.hashVal = val;
            };
            this.xtx.digestAndEncryptDataSM3(
              this.cajskey,
              JSON.stringify(strUserData),
              file
            );
          }
        });
      } else {
        this.ruleForm.imageFront = [];
        this.$message({
          message: "仅支持JPG格式上传，限制1M以下",
          type: "error"
        });
      }

      // console.log('hash',this.xtx);
    },
    Frontview() {
      this.ruleForm.FrontBigShow = true;
    },
    FrontRemovess() {
      this.ruleForm.imageFrontShow = false;
      this.ruleForm.imageFrontUrl = "";
      this.ruleForm.imageFront = [];
    },
    imageFrontUpload(option) {
      console.log("图片上传", option.raw);
      let uid = option.raw.uid;
      let raw = option.raw;
      const date = new Date().getTime();
      const namearr = raw.name.split(".");
      // 定义上传文件的名字+后缀
      const storeAs = uid + "" + date + "." + namearr[1];
      // 调用oss上传接口
      client
        .multipartUpload("carplusgo-info-img/" + storeAs, raw)
        .then(response => {
          if (response.res.status === 200) {
            console.log("上传成功", response.res);
            if (response.res.requestUrls[0].indexOf("?") > -1) {
              this.ruleForm.imageFrontUrl = response.res.requestUrls[0].split(
                "?"
              )[0];
            } else {
              this.ruleForm.imageFrontUrl = response.res.requestUrls[0];
            }
          }
        })
        .catch(function(err) {
          console.error("error: ", err);
        });
    },
    // 右45度
    rightChange(file) {
      console.log( file.raw);
      const isLt2M = file.size / 1024 / 1024 < 1;
      if (file.raw.type.indexOf("image/jpeg") != -1 && isLt2M) {
        console.log("格式正确", file.raw);
        this.ruleForm.imageRightShow = true;
        this.imageRightUpload(file);
      } else {
        this.ruleForm.imageRight = [];
        this.$message({
          message: "仅支持JPG格式上传，限制1M以下",
          type: "error"
        });
      }
    },
    rightView() {
      this.ruleForm.rightBigShow = true;
    },
    rightRemoves() {
      this.ruleForm.imageRightShow = false;
      this.ruleForm.imageRightUrl = "";
      this.ruleForm.imageRight = [];
    },
    imageRightUpload(option) {
      console.log("图片上传", option.raw);
      let uid = option.raw.uid;
      let raw = option.raw;
      const date = new Date().getTime();
      const namearr = raw.name.split(".");
      // 定义上传文件的名字+后缀
      const storeAs = uid + "" + date + "." + namearr[1];
      // 调用oss上传接口
      client
        .multipartUpload("carplusgo-info-img/" + storeAs, raw)
        .then(response => {
          if (response.res.status === 200) {
            console.log("上传成功", response.res.requestUrls[0].split("?")[0]);
            if (response.res.requestUrls[0].indexOf("?") > -1) {
              this.ruleForm.imageRightUrl = response.res.requestUrls[0].split(
                "?"
              )[0];
            } else {
              this.ruleForm.imageRightUrl = response.res.requestUrls[0];
            }
          }
        })
        .catch(function(err) {
          console.error("error: ", err);
        });
    },

    // 文件
    // handleRemove(file) {
    //   console.log(file);
    // },
    // handlePreview(file) {
    //   console.log(file);
    // },

    // 视频上传
    videoChange(file) {
      // this.ruleForm.videoBigShow = true;
      console.log("视频", file);
    },
    videoView() {
      this.ruleForm.videoBigShow = true;
    },
    videoRemoves(file) {
      console.log("视频", file);
    },
    videoUpload(option) {
      console.log("图片上传", option.raw);
      let uid = option.raw.uid;
      let raw = option.raw;
      const date = new Date().getTime();
      const namearr = raw.name.split(".");
      // 定义上传文件的名字+后缀
      const storeAs = uid + "" + date + "." + namearr[1];
      // 调用oss上传接口
      client
        .multipartUpload("carplusgo-info-img/" + storeAs, raw)
        .then(response => {
          console.log("视频上传成功", response);
          if (response.res.status === 200) {
            // console.log("视频上传成功", response.res);
            if (response.res.requestUrls[0].indexOf("?") > -1) {
              this.videoSrc = response.res.requestUrls[0].split("?")[0];
            } else {
              this.videoSrc = response.res.requestUrls[0];
            }
            //视频上传 进度
            this.processLen = 100;
            this.upProcess();
          } else {
            this.uploadHintShow = true;
            console.log("视频上传失败");
            this.$message({
              message: "视频上传失败,请重新上传",
              type: "error"
            });
          }
        })
        .catch(err => {
          this.uploadHintShow = true;
          this.$message({
            message: "视频上传失败,请重新上传",
            type: "error"
          });
        });
    },
    // 上传之前
    beforeAvatarUpload(file) {
      return new Promise((resolve, reject) => {
        if (["video/mp4", "video/mov"].indexOf(file.raw.type) == -1) {
          return reject("请上传正确的视频格式!");
        }

        if (file.size / 1024 / 1024 > this.sizeLimit) {
          return reject(`视频大小不能超过${this.sizeLimit}M!`);
        }

        if (this.videoList.length === this.numLimit) {
          return reject(`最多上传${this.numLimit}个视频`);
        }
        resolve("符合表單規則");
      });
    },
    // 上传改变
    async handleAvatarChange(file, fileList) {
      try {
        await this.beforeAvatarUpload(file);
        this.uploadImgApi(file);
      } catch (e) {
        this.$message.warning(JSON.stringify(e));
      }
      if (file.status === "ready") {
        this.upProcess();
      }
    },
    // 视频上传进度条
    upProcess() {
      this.showProcess = true; //进度条显示
      const interval = setInterval(() => {
        if (this.processLen >= 95) {
          clearInterval(interval);
          return;
        } else if (this.processLen == 100) {
          clearInterval(interval);
        }
        this.processLen += 1; //进度条
      }, 200);
    },

    // 上传视频准备
    uploadImgApi(data) {
      this.videoUploadShow = false;
      console.log(data, "upload**");
      this.videoUpload(data);
      const videoSrcVal = URL.createObjectURL(data.raw);
      this.videoList.push({
        videoFile: data,
        url: videoSrcVal,
        isShowPopup: false
      });
      this.$emit("change", this.videoList);
    },
    // 预览视频
    previewVideo(data) {
      if (data.videoLink) {
        this.videoSrc = `${this.videoBaseUrl}${data.videoLink}`;
      } else {
        this.videoSrc = data.url;
      }
      this.dialogVisible = true;
    },
    // 删除视频
    deleteVideo(index) {
      this.$emit("delete", index);
      this.videoList = [];
      this.videoSrc = "";
      this.videoUploadShow = true;
      this.uploadHintShow = false;

      this.showProcess = false; //进度条隐藏
      this.processLen = 0; //进度比
    },
    handleClose() {
      const video = document.getElementsByTagName("video")[1];
      if (!video.paused) {
        video.currentTime = 0;
        video.pause();
      }
      this.dialogVisible = false;
    },
    // 文件下载
    download(e) {
      // http://digital.ekaifa.net/
      let a = document.createElement("a");
      if (e == "1") {
        if (this.ruleForm.aspect != 2) {
          a.href = "/肖像-原创证明书.docx";
        } else {
          a.href = "/肖像-授权书.docx";
        }
      } else {
        if (this.ruleForm.sound != 2) {
          a.href = "/声音-原创证明书.docx";
        } else {
          a.href = "/声音-授权书.docx";
        }
        // a.setAttribute('download','原创证明书.docx')
      }

      a.style.display = "none";
      document.body.appendChild(a);
      a.click();
      a.remove();
    },
    // 发布平台
    terraceChange(val) {
      // 显示隐藏平台链接输入框
      var exist = this.terraceShow.indexOf(val);
      if (exist > -1) {
        this.terraceShow.splice(exist, 1);
      } else {
        this.terraceShow.push(val);
      }

      // 向数组中增删发布平台
      if (this.terraceList.length > 0) {
        var show = false;
        this.terraceList.forEach((item, index) => {
          if (item.platform == val) {
            this.terraceList.splice(index, 1);
            show = true;
          }
        });
        if (!show) {
          this.terraceList.push({
            platform: val,
            platform_url: ""
          });
        }
      } else {
        this.terraceList.push({
          platform: val,
          platform_url: ""
        });
      }
    },
    // 发布平台链接
    terraceChangeLink(val) {
      this.terraceList.forEach(item => {
        if (item.platform == val) {
          item.platform_url = this.terrace["link" + val];
        }
      });
      console.log(this.terraceList, this.terrace["link" + val]);
    }
  }
};
</script>

<style scoped lang="scss">
:deep .hide .el-upload--picture-card {
  display: none;
}

.main {
  width: 100%;
  // max-width: 1920px;
  // min-width: 1440px;
  min-height: 70vh;
  background-color: #ebf1fb;
  padding-bottom: 32px;
  position: relative;
  margin: auto;
  // outline: 2px solid yellow;
  &-their {
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    color: #999999;
    position: absolute;
    bottom: 28px;
  }
}
.content {
  max-width: 1920px;
  min-width: 1440px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  margin-bottom: 145px;
  margin-top: 30px;
  // outline: 2px solid red;
  &-box {
    width: 1400px;
    margin: 0px auto;
    background-color: #fff;
    padding: 70px 80px 66px 80px;
    // outline: 2px solid rgb(0, 38, 255);

    &-head {
      margin-bottom: 30px;
      display: flex;
      align-items: center;
      &-frame {
        width: 5px;
        height: 18px;
        background-color: #3a7bd8;
      }
      &-text {
        margin-left: 10px;
        font-size: 20px;
        font-weight: 500;
        color: #000000;
      }
    }
  }
}
.birthday {
  // width: 100%;
  margin-left: -80px;
  position: relative;
  &-title {
    width: 100%;
    text-align: left;
    padding-right: 10px;
    font-size: 16px;
    font-weight: 500;
    color: #333333;
    // margin-bottom: 10px;
  }
  &-option {
    width: 100%;
    margin-left: 20px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    // outline: 2px solid rgb(8, 202, 2);
    padding-bottom: -10px;
    &-item {
      width: 482px;
      display: flex;
      margin-right: 20px;
      margin-bottom: 20px;
    }
  }
  &-hint {
    // position: absolute;
    // bottom: -20px;
    // left: 20px;
    color: #f56c6c;
    font-size: 12px;
    margin-left: 20px;
  }
}
:deep .el-checkbox {
  width: 160px !important;
  // outline: 2px solid red;
}
.radio {
  display: flex;
  justify-content: start;
  margin-left: -80px;
  &-title {
    width: 135px;
    text-align: right;
    font-size: 16px;
    font-weight: 500;
    color: #333333;
    margin-bottom: 20px;
    // outline: 1px solid red;
  }
  &-option {
    width: 100%;
    height: 46px;
    margin-left: 20px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    // margin-bottom: 20px;
  }
}
.elinput {
  width: 984px !important;
}
.elinput-left {
  width: 482px !important;
  height: 46px !important;
  margin-right: 20px;
  // outline: 2px solid red;
}
.operate {
  width: 210px;
  height: 46px;
  // border: 1px dashed #3a7bd8;
  margin-bottom: 20px;
  border-radius: 0px;
  display: flex;

  &-minus {
    width: 86px;
    border: 1px dashed #3a7bd8;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 400;
    color: #3a7bd8;
    margin-right: 20px;
    > img {
      width: 11px;
      // height: 1px;
      margin-right: 6px;
    }
  }
}
.file {
  width: 214px;
  height: 42px;
  background: rgba(58, 123, 216, 0.1);
  font-size: 16px;
  font-weight: 400;
  color: #3a7bd8;
  display: flex;
  justify-content: center;
  align-items: center;

  > img {
    width: 20px;
    height: 15px;
    margin-right: 10px;
  }
}
.shangchaun {
  width: 214px;
  height: 136px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 400;
  color: #3a7bd8;
  position: relative;
  > img {
    width: 74px;
    height: 52px;
    overflow: hidden;
  }
  > p {
    margin-top: 11px;
  }
  &-child {
    position: absolute;
    bottom: -20px;
    left: 0px;
    color: #f56c6c;
    font-size: 12px;
  }
}
.video {
  width: 482px;
  height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 400;
  color: #3a7bd8;
  background: rgba(58, 123, 216, 0.1);
  > img {
    width: 59px;
    height: 57px;
  }
  &-child {
    position: absolute;
    bottom: -20px;
    left: 0px;
    color: #f56c6c;
    font-size: 12px;
  }
}

.submit {
  margin-top: 58px;
  display: flex;
  justify-content: center;

  &-but {
    width: 414px;
    height: 66px;
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    background: linear-gradient(135deg, #3b7ad8, #10a3e4);
    outline: none;
  }
  &-last {
    width: 414px;
    height: 66px;
    font-size: 20px;
    font-weight: 400;
    color: #3a7bd8;
    border: 1px solid #3a7bd8;
    background: none;
    outline: none;
    margin-left: 10px;
    margin-right: 20px;
    margin-bottom: 20px;
  }
}

:deep label {
  width: 125px !important;
  color: #333333;
  font-size: 16px;
  font-weight: 500;
}
:deep .el-input__inner {
  border-radius: 0px;
  height: 46px;
}
:deep .el-upload-list__item {
  width: 596px;
  height: 68px;
  padding-left: 16px;
  line-height: 68px;
  background: rgba(58, 123, 216, 0.1);
}
:deep .el-upload-list__item-status-label {
  width: 30px !important;
}
:deep .el-icon-close {
  // line-height: 60px;
  line-height: 0px;
  padding-right: 20px;
  height: 0px;
}
:deep .upload-demo {
  width: 100%;
  margin-left: 20px;
}
:deep .el-upload--picture-card {
  width: 214px;
  height: 136px;
  line-height: 15px;
  margin-right: 10px;
}
:deep .el-select {
  width: 984px;
}
:deep .el-form-item {
  margin-bottom: 20px;
}
.xinzeng {
  border: 2px solid red;
}
:deep .el-icon-close {
  line-height: 0px;
  top: 35px;
}
:deep .is-ready {
  width: 214px;
  max-height: 136px;
  height: 100%;
}
:deep .el-upload-list__item {
  padding-left: 0px;
}
:deep .elinput-left[data-v-2741453c] {
  margin-bottom: 0px;
}

$width: 480px;
$height: 190px;

.upload-box {
  .avatar-uploader-box {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-bottom: 20px;
    min-width: 350px;
    .avatar-uploader {
      .el-upload {
        width: $width;
        height: $height;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        &:hover {
          border-color: #409eff;
        }
        .el-loading-spinner {
          width: $width;
          height: $height;
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-top: 0;
          top: 0;
          .el-loading-text {
            margin: 0;
          }
        }
      }
      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: $width;
        height: $height;
        line-height: $height;
        text-align: center;
      }
    }
    .video-preview {
      position: relative;
      padding-right: 20px;
      .avatar {
        width: $width;
        height: $height;
        display: block;
        border-radius: 6px;
      }
      .avatar-uploader-popup {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        width: $width;
        height: $height;
        background: rgba($color: #000000, $alpha: 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 20px;
        border-radius: 6px;
        i {
          width: 30%;
          text-align: center;
          padding: 0 5%;
          font-size: 24px;
        }
      }
    }

    .upload-tip {
      position: absolute;
      bottom: 0;
      left: 0;
      font-size: 12px;
      color: #606266;
      max-width: 350px;
      line-height: 20px;
    }
  }
  &-hint {
    color: rgb(224, 46, 46);
  }
}
.big-box {
  margin-bottom: 0px;
}
:deep .el-icon-close {
  line-height: 0px;
}
.offsetParent {
  // outline: 2px solid red;
  position: relative;
  &-child {
    position: absolute;
    bottom: -35px;
    left: 20px;
    color: #f56c6c;
    font-size: 12px;
  }
}

:deep .el-upload-list__item {
  // outline: 2px solid red;
  width: 214px;
  max-height: 136px;
  height: 100%;
}
</style>
